<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/22
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>新途New way</title>
    <%@include file="/include/header.jsp"%>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/datedropper.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/timedropper.min.css">
    <style>
        a:hover,a:visited,a:active,a:link{
            text-decoration:none;
        }
        #jsbc,#jsj,#py{
            margin-left: 5%;
        }
        #select label{
            font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
            font-size: 14px;
            line-height: 1.4;
            font-weight: 100;
        }
        .input{padding:6px;border:1px solid #d3d3d3}
    </style>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
    <div class="content-block">
        <p>Left panel content goes here</p>
    </div>
</div>
<!-- Views -->
<div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
                <div class="left">
                    <a class="link" onClick="targetPage()" id="back"><i class="icon icon-back"></i><span>返回</span></a>
                </div>
                <div class="center sliding" id="pageTitle">包车陪游</div>
            </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
            <!-- Page, "data-page" contains page name -->
            <div class="page" data-page="index">
                <!-- Scrollable page content -->

                <div class="page-content" style="margin-top:10%;padding-left: 8%;">
                    位置:
                    <div class="dropdown">
                      <select class="btn btn-default dropdown-toggle" type="button" id="cityId"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width: 80%">
                          <option value="1">皇后镇</option>
                          <option value="2">奥克兰</option>
                          <option value="3">罗托鲁瓦</option>
                          <option value="4">陶波</option>
                          <option value="5">惠灵顿</option>
                          <option value="6">但尼丁</option>
                          <option value="7">基督城</option>
                          <option value="8">尼尔森</option>
                          <option value="9">陶兰加</option>
                          <option value="10">瓦纳卡</option>
                        </select>
                    </div>
                    人数:
                    <div class="dropdown">
                        <select class="btn btn-default dropdown-toggle" type="button" id="personNumber"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width: 80%">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5人及以上</option>
                        </select>
                    </div>
                    <div style="margin-top: 5%;" id="select">
                        <input type="radio" checked="checked" name="type" id="qrbc" value="8"/>
                        <label for="qrbc">全日包车</label>
                        <input type="radio" name="type" id="jsbc" value="9"/>
                        <label for="jsbc">计时包车</label>
                        <input type="radio" name="type" id="jsj" value="10"/>
                        <label for="jsj">接送机</label>
                        <input type="radio" name="type" id="py" value="11"/>
                        <label for="py">陪游</label>
                    </div>

                    <div id="time">
                        <div class="start">
                            <p>开始时间：<input type="text" class="input" id="startDate" style="width:30%"/>:
                                <input type="text" class="input" id="startTime" style="width:20%"/></p>
                        </div>
                        <div class="end">
                            <p>结束时间：<input type="text" class="input" id="endDate" style="width:30%"/>:
                                <input type="text" class="input" id="endTime" style="width:20%" value=""/></p>
                        </div>
                    </div>

                    <script src="${ctx}/static/js/datedropper.min.js"></script>
                    <script src="${ctx}/static/js/timedropper.min.js"></script>
                    <script>
                        $("#startDate").dateDropper({
                            animate: true,
                            format: 'Y-m-d',
                            maxYear: '2020'
                        });
                        $("#startTime").timeDropper({
                            meridians: false,
                            format: 'HH:mm',
                        });
                        $("#endDate").dateDropper({
                            animate: false,
                            format: 'Y-m-d',
                            maxYear: '2020'
                        });
                        $("#endTime").timeDropper({
                            meridians: false,
                            format: 'HH:mm',
                        });
                        $("#startTime").val("");
                        $("#endTime").val("");
                    </script>
                </div>
            </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="../search-data.jsp" class="button" id="toolbar-button" onclick="handler()"
                   style="width:50%;margin-left: 25%;border-color: #808080;color:black">搜索</a>
            </div>
        </div>
    </div>
</div>
<%@include file="/include/footer.jsp"%>
<script type="text/javascript" src="my-app.js"></script>
<script>
    var myApp = new Framework7();

    var $$ = Framework7.$;

    var mainView = myApp.addView('.view-main');


    function targetPage() {
        alert("11");
        var pageName = myApp.mainView.activePage.name;
        if (pageName == 'index') {
            WeixinJSBridge.call('closeWindow');
        } else if (pageName == 'search') {
            $("#back").attr("href", "list.jsp");
            $("#toolbar-button").html("搜索");
            mainView.showToolbar();
        } else if (pageName == 'detail') {
            $("#back").attr("href", "../search-data.jsp");
            mainView.hideToolbar();
        }
    }
</script>
</body>
</html>
